<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>数据可视化demo</title>
    <link href="../styles/common.css" rel="stylesheet">
    <link href="../styles/me.css" rel="stylesheet">
    <script src="../scripts/Plugin/jquery-3.3.1.min.js"></script>
    <script src="../scripts/Plugin/echarts.min.js"></script>
    <script src="../scripts/common.js"></script>
    <script src="../scripts/index.js"></script>
    <script src="../scripts/Plugin/laydate/laydate.js"></script>
</head>

<body>
    <!--顶部-->
    <header class="header left">


        <div class="left nav">
            <ul>
                <li><i class="nav_1"></i><a href="index.html">整体情况</a> </li>
                <li><i class="nav_2"></i><a href="quota.html">内存情况</a> </li>
                <li><i class="nav_3"></i><a href="trend.html">运行分析</a> </li>
            </ul>
        </div>
        <div class="header_center me-center" style="position:relative">

            <h2><strong>系统可用资源</strong></h2>

        </div>

    </header>
    <!--内容部分-->

    <div class="con left">
        <div class="con_div me-middle-top-margin">
            <div class="con_div_text left">
                <div class="con_div_text01 left">
                    <img src="../images/info_1.png" class="left text01_img" />
                    <div class="left text01_div">
                        <p>作业总数</p>
                        <p>1235</p>
                    </div>
                </div>
                <div class="con_div_text01 right">
                    <img src="../images/info_2.png" class="left text01_img" />
                    <div class="left text01_div">
                        <p>进程总数</p>
                        <p>235</p>
                    </div>
                </div>
            </div>




            <div class="con_div_text left">
                <div class="me-con_div_text01 left">
                    <div class="left text01_div">
                        <p>就绪进程数</p>
                        <p class="sky">12356</p>
                    </div>
                </div>
                <div class="me-con_div_text01 left">
                    <div class="left text01_div">
                        <p>阻塞进程数</p>
                        <p class="sky">12356</p>
                    </div>
                </div>
                <div class="me-con_div_text01 left">
                    <div class="left text01_div">
                        <p>运行进程数</p>
                        <p class="sky">12356</p>
                    </div>
                </div>

            </div>



            <div class="con_div_text left">

                <div class="con_div_text01 left">
                    <img src="../images/info_5.png" class="left text01_img" />
                    <div class="left text01_div">
                        <p>内存使用情况</p>
                        <p class="org">12356</p>
                    </div>
                </div>
                <div class="con_div_text01 right">
                    <img src="../images/info_6.png" class="left text01_img" />
                    <div class="left text01_div">
                        <p>空闲百分比</p>
                        <p class="org">12356</p>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="me-content">

        <div class="me-middle">

            <div class="left div_table_box" style="width: 30%;">
                <div class="div_any_child" style="height: 400px;width: 400px;">
                    <div class="div_any_title"><img src="../images/title_16.png">后备作业队列作业简要信息</div>
                    <div class="table_p table-scroll">
                        <table>
                            <thead>
                                <tr>
                                    <th class="me-th-content-left">pid</th>
                                    <th>进程名</th>
                                    <th class="me-th-content-right">提交时间</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>1</td>
                                    <td>AAAAAAAAA</td>
                                    <td>2021-11-05</td>
                                </tr>
                                <tr>
                                    <td>2</td>
                                    <td>BBBBBBB</td>
                                    <td>2021-11-03</td>
                                </tr>
                                <tr>
                                    <td>3</td>
                                    <td>CCCC</td>
                                    <td>2021-11-01</td>
                                </tr>
                                <tr>
                                    <td>1</td>
                                    <td>AAAAAAAAA</td>
                                    <td>2021-11-05</td>
                                </tr>
                                <tr>
                                    <td>2</td>
                                    <td>BBBBBBB</td>
                                    <td>2021-11-03</td>
                                </tr>
                                <tr>
                                    <td>3</td>
                                    <td>CCCC</td>
                                    <td>2021-11-01</td>
                                </tr>
                                <tr>
                                    <td>1</td>
                                    <td>AAAAAAAAA</td>
                                    <td>2021-11-05</td>
                                </tr>
                                <tr>
                                    <td>2</td>
                                    <td>BBBBBBB</td>
                                    <td>2021-11-03</td>
                                </tr>
                                <tr>
                                    <td>3</td>
                                    <td>CCCC</td>
                                    <td>2021-11-01</td>
                                </tr>

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <div class="left div_table_box" style="width: 30%;margin-left: 135px;">
                <div class="div_any_child" style="height: 400px;width: 400px;">
                    <div class="div_any_title"><img src="../images/title_16.png">就绪作业队列作业简要信息</div>
                    <div class="table_p table-scroll">
                        <table>
                            <thead>
                                <tr>
                                    <th class="me-th-content-left">pid</th>
                                    <th>进程名</th>
                                    <th class="me-th-content-right">提交时间</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>1</td>
                                    <td>AAAAAAAAA</td>
                                    <td>2021-11-05</td>
                                </tr>
                                <tr>
                                    <td>2</td>
                                    <td>BBBBBBB</td>
                                    <td>2021-11-03</td>
                                </tr>
                                <tr>
                                    <td>3</td>
                                    <td>CCCC</td>
                                    <td>2021-11-01</td>
                                </tr>
                                <tr>
                                    <td>1</td>
                                    <td>AAAAAAAAA</td>
                                    <td>2021-11-05</td>
                                </tr>
                                <tr>
                                    <td>2</td>
                                    <td>BBBBBBB</td>
                                    <td>2021-11-03</td>
                                </tr>
                                <tr>
                                    <td>3</td>
                                    <td>CCCC</td>
                                    <td>2021-11-01</td>
                                </tr>
                                <tr>
                                    <td>1</td>
                                    <td>AAAAAAAAA</td>
                                    <td>2021-11-05</td>
                                </tr>
                                <tr>
                                    <td>2</td>
                                    <td>BBBBBBB</td>
                                    <td>2021-11-03</td>
                                </tr>
                                <tr>
                                    <td>3</td>
                                    <td>CCCC</td>
                                    <td>2021-11-01</td>
                                </tr>
                                <tr>
                                    <td>1</td>
                                    <td>AAAAAAAAA</td>
                                    <td>2021-11-05</td>
                                </tr>
                                <tr>
                                    <td>2</td>
                                    <td>BBBBBBB</td>
                                    <td>2021-11-03</td>
                                </tr>
                                <tr>
                                    <td>3</td>
                                    <td>CCCC</td>
                                    <td>2021-11-01</td>
                                </tr>
                                <tr>
                                    <td>1</td>
                                    <td>AAAAAAAAA</td>
                                    <td>2021-11-05</td>
                                </tr>
                                <tr>
                                    <td>2</td>
                                    <td>BBBBBBB</td>
                                    <td>2021-11-03</td>
                                </tr>
                                <tr>
                                    <td>3</td>
                                    <td>CCCC</td>
                                    <td>2021-11-01</td>
                                </tr>
                                <tr>
                                    <td>1</td>
                                    <td>AAAAAAAAA</td>
                                    <td>2021-11-05</td>
                                </tr>
                                <tr>
                                    <td>2</td>
                                    <td>BBBBBBB</td>
                                    <td>2021-11-03</td>
                                </tr>
                                <tr>
                                    <td>3</td>
                                    <td>CCCC</td>
                                    <td>2021-11-01</td>
                                </tr>

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>



            <div class="me-middle-title">
                <div class="left div_table_box" style="width: 30%;">
                    <div class="div_any_child" style="height: 400px;width: 400px;">
                        <div class="div_any_title"><img src="../images/title_16.png">阻塞队列进程情况</div>
                        <div class="table_p table-scroll">
                            <table>
                                <thead>
                                    <tr>
                                        <th class="me-th-content-left">pid</th>
                                        <th>进程名</th>
                                        <th class="me-th-content-right">提交时间</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>1</td>
                                        <td>AAAAAAAAA</td>
                                        <td>2021-11-05</td>
                                    </tr>
                                    <tr>
                                        <td>2</td>
                                        <td>BBBBBBB</td>
                                        <td>2021-11-03</td>
                                    </tr>
                                    <tr>
                                        <td>3</td>
                                        <td>CCCC</td>
                                        <td>2021-11-01</td>
                                    </tr>
                                    <tr>
                                        <td>1</td>
                                        <td>AAAAAAAAA</td>
                                        <td>2021-11-05</td>
                                    </tr>
                                    <tr>
                                        <td>2</td>
                                        <td>BBBBBBB</td>
                                        <td>2021-11-03</td>
                                    </tr>
                                    <tr>
                                        <td>3</td>
                                        <td>CCCC</td>
                                        <td>2021-11-01</td>
                                    </tr>
                                    <tr>
                                        <td>1</td>
                                        <td>AAAAAAAAA</td>
                                        <td>2021-11-05</td>
                                    </tr>
                                    <tr>
                                        <td>2</td>
                                        <td>BBBBBBB</td>
                                        <td>2021-11-03</td>
                                    </tr>
                                    <tr>
                                        <td>3</td>
                                        <td>CCCC</td>
                                        <td>2021-11-01</td>
                                    </tr>

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <div class="left div_table_box" style="width: 30%;margin-left: 145px;">
                    <div class="div_any_child" style="height: 400px;width: 400px;">
                        <div class="div_any_title"><img src="../images/title_16.png">已完成队列进程情况</div>
                        <div class="table_p table-scroll">
                            <table>
                                <thead>
                                    <tr>
                                        <th class="me-th-content-left">pid</th>
                                        <th>进程名</th>
                                        <th class="me-th-content-right">提交时间</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>1</td>
                                        <td>AAAAAAAAA</td>
                                        <td>2021-11-05</td>
                                    </tr>
                                    <tr>
                                        <td>2</td>
                                        <td>BBBBBBB</td>
                                        <td>2021-11-03</td>
                                    </tr>
                                    <tr>
                                        <td>3</td>
                                        <td>CCCC</td>
                                        <td>2021-11-01</td>
                                    </tr>
                                    <tr>
                                        <td>1</td>
                                        <td>AAAAAAAAA</td>
                                        <td>2021-11-05</td>
                                    </tr>
                                    <tr>
                                        <td>2</td>
                                        <td>BBBBBBB</td>
                                        <td>2021-11-03</td>
                                    </tr>
                                    <tr>
                                        <td>3</td>
                                        <td>CCCC</td>
                                        <td>2021-11-01</td>
                                    </tr>
                                    <tr>
                                        <td>1</td>
                                        <td>AAAAAAAAA</td>
                                        <td>2021-11-05</td>
                                    </tr>
                                    <tr>
                                        <td>2</td>
                                        <td>BBBBBBB</td>
                                        <td>2021-11-03</td>
                                    </tr>
                                    <tr>
                                        <td>3</td>
                                        <td>CCCC</td>
                                        <td>2021-11-01</td>
                                    </tr>

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

            </div>
        </div>

        <div class="me-content-right">

        </div>


        <div class="me-content-bottom">


        </div>

    </div>




    </div>
    </div>
    </div>

</body>

</html>